import { Button } from 'antd';
import React, { useState } from "react"
import "./index.css"

export default function MultiButton(props) {
    const { dataSource, values,disabled } = props;
    const [btnValues, setBtnValues] = useState(values || [])
    const handleBtnClick = (btnValue, event) => {
        event.currentValues = btnValue
        let newButnIds = new Set(btnValues);

        if (newButnIds.has(btnValue)) {
            newButnIds.delete(btnValue)
        } else {
            newButnIds.add(btnValue)
        }
        setBtnValues(Array.from(newButnIds));

        if (props.onClick) {
            props.onClick(Array.from(newButnIds), event)
        }
    }
    return (
        <div>
            {
                dataSource.map(btn => <Button
                    disabled={disabled}
                    type={btnValues.includes(btn.value) ? 'primary' : 'default'}
                    onClick={(e) => {
                        handleBtnClick(btn.value, e)
                    }}>{btn.title || ''}</Button>)
            }
        </div >
    )
}